<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <img src="" alt="" id="imgAvatar" />
    <input type="file" id="avatar" />
    <button>上传</button>
    <script>
      async function upload() {
        const inp = document.getElementById('avatar');
        if (inp.files.length === 0) {
          alert('请选择要上传的文件');
          return;
        }
        const formData = new FormData(); //构建请求体
        formData.append('imagefile', inp.files[0]);
        const url = 'http://study.yuanjin.tech/api/upload';
        const resp = await fetch(url, {
          method: 'POST',
          body: formData, //自动修改请求头
        });
        const result = await resp.json();
        return result;
      }

      document.querySelector('button').onclick = async function () {
        const result = await upload();
        const img = document.getElementById('imgAvatar');
        img.src = result.path;
      };
    </script>
  </body>
</html>
